<template>
	<view class="colCenSta h-100">
		<!-- 选项卡 -->
		<find-head-tab-bar :headTabData="headTabData" @click="clickTabFn"></find-head-tab-bar>
		<!-- 页面级swiper -->
		<swiper class="flex-1 w-100" :current="pageSwiperData.currentPageIndex" @change="pageChange">
			<swiper-item v-for="(item,index) in pageSwiperData.pages" :key="index">
				<scroll-view class="w-100 h-100" scroll-y="true" >
					<!-- 今日推荐部分 -->
					<!-- 今日推荐头部swiper -->
					<view v-if="item.headSwiperData" class="w-100" style="height: 655rpx;">
						<swiper class="mt-2" style="height: 655rpx;" circular
							@change="headSwiperChange">
							<swiper-item v-for="(item,index) in item.headSwiperData.list" :key="index">
								<find-head-swiper-item :item="item"></find-head-swiper-item>
							</swiper-item>
						</swiper>
						<!-- 指示点 -->
						<view class="rowCenCen">
							<view class="bg-grey mt-3 mx-2 radius-100" style="height: 10rpx;"
								:style="'width:'+(item.headSwiperData.current===index?40:10)+'rpx'"
								v-for="(i,index) in  item.headSwiperData.list" :key="index"></view>
						</view>
					</view>
					<!-- 列表项 -->
					<template v-if="item.findDynamicData" v-for="(item,index) in item.findDynamicData" :key="index">
						<find-dynamic-item :item="item"></find-dynamic-item>
					</template>
					<!-- 资讯专区部分 -->
					<!-- 新闻列表 -->
					<view v-if="item.newsList" class="px-5 rowCenBet flex-wrap" style="margin-bottom: 85rpx;">
						<view v-for="(item,index) in item.newsList" style="width: 212rpx;height: 330rpx;" class="mb-2 position-relative" :key="index">
							<image class="w-100 h-100" :src="item.image" mode="aspectFill"></image>
							<view style="width: 212rpx;height: 130rpx;" 
							class="position-absolute bottom-0 left-0 bg-frosted-glass text-white px-2">
								<view class="my-15">{{item.title}}</view>
								<view class="font-20">{{item.desc}}</view>
							</view>
						</view>
					</view>
					<view v-if="item.newsList" class="px-5">
						<base-divide-line></base-divide-line>
					</view>
					<!-- 大图、小图组合图部分 -->
					<template v-if="item.combineImages">
						<find-image-combine :item="item" v-for="(item,index) in item.combineImages" :key="index"></find-image-combine>
					</template>
					<!-- NIO Radio 部分 -->
					<view v-if="item.radio" class="w-100 h-100 position-relative" style="background-image:linear-gradient(45deg,#38568a,#b3cdee);">
						<!-- 背景图 -->
						<view class="position-absolute left-0 right-0 mx-auto " style="width: 400rpx;height: 400rpx;top: 185rpx;">
							<image class="w-100 h-100" src="../../static/find/news/4.jpg" style="box-shadow: 0 0 56rpx rgba(255, 255, 255, 3.15);" mode="aspectFill"></image>
							<view class="position-absolute w-100 text-center font-20" style="bottom: 25rpx;">
								<text class="font-weight-700 text-white">NIO</text>
								<text class="text-grey">Radio</text>
							</view>
							<view class="position-absolute w-100 text-center font-35 text-white" style="bottom:-75rpx">
								Your Place To Relax
							</view>
						</view>
						<!-- 进度条 -->
						<view class="position-absolute left-0 right-0 mx-auto" style="width: 650rpx;height: 4rpx;background-color: rgba(255,255,255,.5);bottom: 325rpx;">
							<!-- 进度指示点 -->
							 <view class="radius-100 bg-white position-absolute top-0 bottom-0 my-auto" style="width:27rpx;height: 27rpx;"></view>
							 <!-- 当前播放时长、总时长 -->
							 <view class="position-absolute rowCenBet text-mid-transparent-white" style="width: 650rpx;top:36rpx">
								 <text>00:00</text>
								 <text>00:09</text>
							 </view>
						</view>
						<!-- 按钮 -->
						<view class="position-absolute left-0 right-0 mx-auto rowCenBet" style="width: 650rpx;bottom: 130rpx;">
							<image style="width: 50rpx;height: 50rpx;" src="../../static/find/radio/list.png" mode="aspectFill"></image>
							<image style="width: 50rpx;height: 50rpx;" src="../../static/find/radio/prev.png" mode="aspectFill"></image>
							<image style="width: 70rpx;height: 70rpx;" src="../../static/find/radio/play.png" mode="aspectFill"></image>
							<image style="width: 50rpx;height: 50rpx;" src="../../static/find/radio/next.png" mode="aspectFill"></image>
							<image style="width: 50rpx;height: 50rpx;" src="../../static/find/radio/share.png" mode="aspectFill"></image>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>

</template>

<script setup lang="ts">
	import {
		reactive
	} from 'vue'

	const headTabData = reactive({
		activeIndex: 0,
		list: [{
				text: "今日推荐"
			},
			{
				text: "资讯专区"
			},
			{
				text: "NIO Radio"
			}
		]
	})
	const pageSwiperData = reactive({
		currentPageIndex: 0,
		pages: [{
				name:"今日推荐",
				headSwiperData: {
					current: 0,
					list: [{
							src: "https://static01.imgkr.com/temp/b10f2ac9f48b4abc9811c49e8384bfc2.jpg",
							desc: "元宵情人双节至，悦享与你伴佳人",
							avatar: "/static/find/avatar.jpg",
							nickName: "悦享小队长",
							time: "02-13"
						},
						{
							src: "https://static01.imgkr.com/temp/43946414427e4c22b263c4ee267c07ba.jpg",
							desc: "情人节遇见元宵节，牛屋有「元」人就是你！",
							avatar: "/static/find/avatar.jpg",
							nickName: "悦享小队长",
							time: "02-13"
						}
					]
				},
				findDynamicData:[{
					avatar:"../../static/find/avatar2.jpg",
					nickname:"云心出柚",
					title:"快闪享受蔚来洗车五星服务",
					content:"#有券在手洗车无忧# 年前提车到现在十几天，上海几乎天天下雨。周冬雨啊，由于一直下雨，车里面上上下下，各种泥和脚印，加之买了新的鞋垫，在哪里可以找到好的洗车点，就成为了重中之中。",
					theme:"有券在手洗车无忧",
					images:{
						list:[
							"https://static01.imgkr.com/temp/a6cde01d279f47148b0bed33e656ef98.png",
							"https://static01.imgkr.com/temp/ea1aa5de4c0e4320ad8135ac05fc3be7.png",
							"https://static01.imgkr.com/temp/107392a016464771a869007756a47197.png",
							"https://static01.imgkr.com/temp/3e8a829a245143e381d4b24a0071223b.png"
						]
					},
					comment:{
						avatar:"../../static/find/avatar2.jpg",
						nickname:"春风化雨QD",
						comment:"周冬雨表示不服！梅雨季节怎么办？",
						time:"02-12",
						commentNum:"评论68",
						supportNum:"点赞204"
					}					
				},{
					avatar:"../../static/find/avatar3.jpg",
					nickname:"冬雨寒风",
					title:"快闪享受蔚来洗车五星服务",
					content:"#有券在手洗车无忧# 年前提车到现在十几天，上海几乎天天下雨。周冬雨啊，由于一直下雨，车里面上上下下，各种泥和脚印，加之买了新的鞋垫，在哪里可以找到好的洗车点，就成为了重中之中。",
					theme:"有券在手洗车无忧",
					images:{
						list:[
							"https://static01.imgkr.com/temp/119212b2ce074e08b542786f339f5b86.jpg",
							"https://static01.imgkr.com/temp/2a2309f45fdd47d19f3d1c3a79651d13.jpg",
							"https://static01.imgkr.com/temp/0e6d80f3012e43c2b241d12738abb713.jpg",
							"https://static01.imgkr.com/temp/f5b26e3fb56646749af505e80e145434.jpg"
						]
					},
					comment:{
						avatar:"../../static/find/avatar2.jpg",
						nickname:"南城风雨湿我脸庞",
						comment:"梅雨季节怎么办？",
						time:"02-15",
						commentNum:"评论97",
						supportNum:"点赞204"
					}					
				}]
			},
			{
				name:"资讯专区",
				newsList:[
					{
						title:"购车指南",
						desc:"最全面购车指南，最新鲜优惠资讯",
						image:"https://static01.imgkr.com/temp/ec5b61c6e3104a62ad74a186301c2120.jpg"
					},
					{
						title:"车辆产品",
						desc:"了解全系量产车 & NIO Plilot",
						image:"https://static01.imgkr.com/temp/96db375df25644469473186fa2025917.jpg"
					},
					{
						title:"用车无忧",
						desc:"全面保障，尽享驾驶乐趣",
						image:"https://static01.imgkr.com/temp/a4ff190446eb4a71967fa8e03550e443.jpg"
					},
					{
						title:"NIO Power",
						desc:"可充可换可升级的智能加电体系",
						image:"https://static01.imgkr.com/temp/2ab23e22b7f0487ab2b0e0981f915240.jpg"
					},
					{
						title:"蔚来中心",
						desc:"蔚来车主和朋友们的自由空间",
						image:"https://static01.imgkr.com/temp/ed62214d7e604271a277878960a1ffa6.jpg"
					},
					{
						title:"用户成长",
						desc:"赚积分挣牛子，成长的秘籍看这里",
						image:"https://static01.imgkr.com/temp/30535e2ba6ff4562ab8f67d6f5d2a422.jpg"
					},
					{
						title:"品牌传播",
						desc:"蔚来，创造愉悦的生活方式",
						image:"https://static01.imgkr.com/temp/0fd4e08c37c14c72b8c308d0a8cff799.jpg"
					},
					{
						title:"VIOCE",
						desc:"分享蔚来精彩点滴感动",
						image:"https://static01.imgkr.com/temp/804f5ca9bc6240328972d249e0999995.jpg"
					},
					{
						title:"社区指引",
						desc:"玩转社区的实用信息，都在这里",
						image:"https://static01.imgkr.com/temp/7ae9826ffc0f4491bb80586785334ed1.jpg"
					},
				],
				combineImages:[
					{
						title:"全系图片视频",
						images:[
							"https://static01.imgkr.com/temp/804f5ca9bc6240328972d249e0999995.jpg",
							"https://static01.imgkr.com/temp/7ae9826ffc0f4491bb80586785334ed1.jpg",
							"https://static01.imgkr.com/temp/0fd4e08c37c14c72b8c308d0a8cff799.jpg",
							"https://static01.imgkr.com/temp/ec5b61c6e3104a62ad74a186301c2120.jpg",
							"https://static01.imgkr.com/temp/2ab23e22b7f0487ab2b0e0981f915240.jpg",
							"https://static01.imgkr.com/temp/96db375df25644469473186fa2025917.jpg"
						]
					}
				]
			},
			{
				radio:"xx",
				
			},
		]
	})
	// 点击tab栏
	const clickTabFn = (index) => {
		// 改变tab的当前索引
		headTabData.activeIndex = index;
		// 改变页面swiper的索引
		pageSwiperData.currentPageIndex = index
	}

	// 页面swiper改变
	const pageChange = (e) => {
		// 需要改变对应当前tab栏的激活项
		headTabData.activeIndex = e.detail.current
		// 对应当前页的激活项也要改变
		pageSwiperData.currentPageIndex = e.detail.current
	}
	// 头部swiper改变
	const headSwiperChange = (e) => {
		// 需要改变对应当前的swiper指示点
		pageSwiperData.pages[pageSwiperData.currentPageIndex].headSwiperData.current = e.detail.current
	}
</script>

<style>

</style>
